
<template>
  <div>
    <d2-container>
      <div class="main">
        <div class="left">
          <!-- <el-input placeholder="输入关键字进行过滤" v-model="filterText">
          </el-input> -->

          <el-tree
            class="filter-tree"
            v-loading="loading"
            :data="leftList"
            node-key="id"
            :props="defaultProps"
            :expand-on-click-node="false"
            @node-click="handleNodeClick"
            default-expand-all
            highlight-current
            :default-expanded-keys="this.defaultExpanded"
            ref="tree"
          >
            <span class="custom-tree-node" slot-scope="{ node, data }">
              <span v-if="node.level == 1">
                <i :class="node.icon"></i>{{ node.label }}
              </span>
              <span v-if="node.level == 2">
                <i :class="node.icon"></i>{{ node.label }}
              </span>
              <span v-if="node.level == 3">
                <i :class="node.icon"></i>{{ node.label }}
              </span>
              <span v-if="node.level == 4"> <i></i>{{ node.label }} </span>
            </span>
          </el-tree>
        </div>
        <div class="right">
          <div class="nav">当前所在位置:首页>仓内遨游</div>
          <div style="height: calc(100% - 49.09px)">
            <div class="right_main">
              <div class="right_title" style="display: flex">
                <div class="title_left" style="width: 30%">
                  <i
                    class="fa fa-university"
                    aria-hidden="true"
                    style="padding-right: 5px"
                  ></i
                  >仓内遨游
                </div>
                <div class="title_right" style="width: 70%; display: flex">
                  <div style="margin-right: 20%">
                    垂直最大距离(m):{{ verticalMaxHeigth }}
                  </div>
                  <div>垂直最小距离(m):{{ verticalMinHeigth }}</div>
                </div>
              </div>

              <div class="right_table">
                <iframe
                  v-show="isShow == true"
                  id="threeIFrame"
                  width="100%"
                  height="100%"
                  frameborder="0"
                  scrolling="auto"
                  style="position: absolute; top: 0px; left: 0px"
                  src="http://112.51.248.191:9026"
                ></iframe>
                <!-- <iframe
                  v-show="isShow == true"
                  id="threeIFrame"
                  width="100%"
                  height="100%"
                  frameborder="0"
                  scrolling="auto"
                  style="position: absolute; top: 0px; left: 0px"
                  src="../../../../static/index.html"
                ></iframe> -->
              </div>
            </div>
          </div>
        </div>
      </div>
    </d2-container>
  </div>
</template>
<script>
var data = {
  Points: [
    [9, 8, 0.89],
    [8, 9, 1.18],
    [7, 8, 0.9],
    [8, 7, 1.11],
    [10, 8, 1.98],
    [9, 9, 1.83],
    [8, 10, 1.93],
    [6, 9, 1.82],
    [6, 8, 2.01],
    [6, 6, 2.12],
    [8, 6, 1.97],
    [9, 6, 2.19],
    [11, 8, 2.85],
    [10, 9, 2.91],
    [9, 10, 2.96],
    [8, 11, 3.06],
    [6, 10, 2.86],
    [5, 9, 2.8],
    [5, 8, 3.12],
    [5, 6, 3.08],
    [6, 5, 2.96],
    [8, 5, 3.0],
    [9, 5, 2.8],
    [10, 6, 2.83],
    [12, 8, 4.17],
    [11, 9, 4.03],
    [10, 10, 4.0],
    [9, 11, 3.97],
    [8, 12, 3.95],
    [6, 11, 3.88],
    [5, 10, 4.14],
    [4, 9, 4.15],
    [4, 8, 3.84],
    [4, 6, 3.84],
    [4, 5, 3.81],
    [6, 4, 3.87],
    [7, 4, 4.0],
    [9, 4, 4.01],
    [10, 4, 3.84],
    [11, 6, 4.18],
    [13, 8, 4.83],
    [12, 9, 4.9],
    [12, 10, 4.9],
    [10, 12, 5.0],
    [9, 12, 5.2],
    [8, 13, 5.1],
    [6, 12, 5.16],
    [5, 12, 4.92],
    [3, 10, 5.0],
    [3, 9, 4.88],
    [3, 8, 4.87],
    [3, 6, 5.04],
    [3, 5, 4.94],
    [5, 3, 4.96],
    [6, 3, 5.02],
    [8, 3, 5.19],
    [9, 3, 5.16],
    [10, 3, 4.86],
    [12, 5, 4.92],
    [12, 6, 5.05],
    [14, 8, 5.89],
    [13, 9, 5.82],
    [13, 11, 5.86],
    [12, 12, 6.07],
    [11, 13, 5.98],
    [9, 13, 5.93],
    [8, 14, 5.85],
    [6, 13, 6.01],
    [5, 13, 6.08],
    [3, 12, 5.97],
    [2, 11, 5.98],
    [2, 9, 5.95],
    [2, 8, 6.15],
    [2, 6, 6.01],
    [2, 5, 5.8],
    [3, 3, 6.19],
    [5, 2, 6.14],
    [6, 2, 5.92],
    [8, 2, 5.92],
    [9, 2, 5.89],
    [11, 2, 6.03],
    [12, 3, 5.87],
    [13, 5, 5.82],
    [13, 6, 6.05],
    [15, 8, 7.19],
    [14, 9, 7.03],
    [14, 10, 7.19],
    [13, 12, 7.0],
    [12, 13, 6.9],
    [11, 14, 7.13],
    [10, 14, 7.18],
    [8, 14, 7.05],
    [7, 14, 7.02],
    [5, 14, 7.14],
    [4, 14, 6.87],
    [3, 13, 6.92],
    [2, 12, 6.86],
    [1, 10, 7.1],
    [1, 9, 7.07],
    [1, 8, 7.12],
    [1, 6, 7.04],
    [1, 5, 6.87],
    [2, 3, 6.85],
    [3, 2, 6.91],
    [4, 1, 6.9],
    [5, 1, 6.83],
    [7, 1, 7.11],
    [8, 1, 6.82],
    [10, 1, 7.11],
    [11, 1, 6.92],
    [12, 2, 7.16],
    [13, 3, 6.87],
    [16, 8, 8.1],
    [15, 9, 7.93],
    [15, 11, 8.0],
    [14, 12, 8.11],
    [13, 13, 8.03],
    [12, 14, 8.0],
    [11, 15, 7.81],
    [9, 15, 7.88],
    [8, 16, 8.04],
    [6, 15, 7.92],
    [5, 15, 8.1],
    [3, 14, 7.93],
    [2, 13, 7.93],
    [1, 12, 7.84],
    [0, 11, 8.04],
    [0, 10, 8.12],
    [0, 8, 7.93],
    [0, 7, 8.18],
    [0, 5, 7.82],
    [1, 4, 7.82],
    [1, 2, 8.09],
    [2, 1, 7.82],
    [4, 0, 8.13],
    [5, 0, 8.18],
    [7, 0, 7.86],
    [8, 0, 7.82],
    [10, 0, 8.06],
    [11, 0, 8.16],
    [12, 1, 7.99],
    [14, 2, 8.08],
    [14, 4, 8.0],
    [15, 5, 8.13],
  ],
  MinHeigth: 6,
};
console.log(".........");
localStorage.LKData = JSON.stringify(data);
console.log(JSON.parse(localStorage.LKData));
</script>
<script>
import api from "@/api";

export default {
  name: "warehouseTravel",

  data() {
    // 1---空仓   2---入库   3--库存   4---出库
    return {
      verticalMinHeigth:null,
      verticalMaxHeigth: null,

      defaultProps: {
        children: "children",

        label: "orgName",
      },
      loading: false,
      //默认展开的节点
      defaultExpanded: [],
      cfbh: "",

      // 左侧树数据
      leftList: [],
      //三维
      isShow: true,
      threeData: {
        Points: [
          [7.0, 6.0, 0.28],
          [6.0, 7.0, 1.39],
          [5.0, 6.0, 2.38],
          [6.0, 5.0, 1.65],
          [8.0, 6.0, 0.93],
          [7.41, 7.41, 0.08],
          [6.0, 8.0, 2.05],
          [4.59, 7.41, 2.12],
          [4.0, 6.0, 2.66],
          [4.59, 4.59, 2.57],
          [6.0, 4.0, 1.39],
          [7.41, 4.59, 0.67],
          [9.0, 6.0, 0.79],
          [8.6, 7.5, 0.32],
          [7.5, 8.6, 0.9],
          [6.0, 9.0, 2.05],
          [4.5, 8.6, 1.85],
          [3.4, 7.5, 2.46],
          [3.0, 6.0, 2.18],
          [3.4, 4.5, 3.02],
          [4.5, 3.4, 2.44],
          [6.0, 3.0, 1.22],
          [7.5, 3.4, 0.0],
          [8.6, 4.5, 0.48],
          [10.0, 6.0, 0.98],
          [9.71, 7.5, 0.42],
          [8.88, 8.78, 0.73],
          [7.63, 9.65, 0.44],
          [6.14, 10.0, 2.23],
          [4.63, 9.76, 3.24],
          [3.32, 8.97, 3.36],
          [2.4, 7.75, 3.6],
          [2.01, 6.28, 4.93],
          [2.2, 4.76, 2.86],
          [2.94, 3.43, 5.09],
          [4.12, 2.47, 1.65],
          [5.58, 2.02, 1.18],
          [7.1, 2.15, 0.41],
          [8.46, 2.85, 0.62],
          [9.46, 4.0, 0.88],
          [11.0, 6.0, 1.73],
          [10.76, 7.55, 0.0],
          [10.05, 8.94, 0.0],
          [8.94, 10.05, 0.58],
          [7.55, 10.76, 0.14],
          [6.0, 11.0, 2.22],
          [4.45, 10.76, 2.2],
          [3.06, 10.05, 2.71],
          [1.95, 8.94, 3.23],
          [1.24, 7.55, 3.02],
          [1.0, 6.0, 2.91],
          [1.24, 4.45, 3.99],
          [1.95, 3.06, 4.62],
          [3.06, 1.95, 3.04],
          [4.45, 1.24, 1.62],
          [6.0, 1.0, 1.27],
          [7.55, 1.24, 0.93],
          [8.94, 1.95, 0.07],
          [10.05, 3.06, 0.0],
          [10.76, 4.45, 0.0],
          [12.0, 6.0, 1.94],
          [11.8, 7.55, 1.23],
          [11.2, 9.0, 1.94],
          [10.24, 10.24, 0.0],
          [9.0, 11.2, 0.91],
          [7.55, 11.8, 0.31],
          [6.0, 12.0, 1.52],
          [4.45, 11.8, 2.83],
          [3.0, 11.2, 1.73],
          [1.76, 10.24, 3.58],
          [0.8, 9.0, 4.49],
          [0.2, 7.55, 3.82],
          [0.0, 6.0, 4.42],
          [0.2, 4.45, 2.65],
          [0.8, 3.0, 2.72],
          [1.76, 1.76, 3.13],
          [3.0, 0.8, 3.1],
          [4.45, 0.2, 2.21],
          [6.0, 0.0, 1.73],
          [7.55, 0.2, 0.41],
          [9.0, 0.8, 0.8],
          [10.24, 1.76, 0.0],
          [11.2, 3.0, 1.99],
          [11.8, 4.45, 1.54],
        ],
        MinHeigth: 50,
      },
    };
  },
  methods: {
    //获取左侧树
    getLeftTree() {
      this.loading = true;
      let params = {
        orgName: this.orgName,
      };

      api
        .leftTree(params)
        .then((res) => {
          if (res.code == 200) {
            console.log(res);
            this.leftList = [];
            if (res.data) {
              this.leftList = res.data;

              // if (res.data[0].id) {
              //   this.defaultExpanded.push(res.data[0].id);
              //   if (res.data[0].children) {
              //     this.defaultExpanded.push(
              //       res.data[0].children[0].children[0].id
              //     );

              //     this.cfbh =
              //       res.data[0].children[0].children[0].children[0].id;

              //     setTimeout(() => {
              //       // document.getElementsByClassName("el-tree-node__content")[0].style.display="none"
              //       // document.getElementsByClassName("el-tree-node__content")[1].style.display="none"
              //       this.$refs.tree.setCurrentKey(this.cfbh);
              //     }, 100);
              //     console.log(this.leftList);
              //     this.getList();
              //   }
              // }

              var lastLevel = res.data;
              if (lastLevel.length > 0) {
                lastLevel = res.data[0];
                while (lastLevel.children && lastLevel.children.length > 0) {
                  lastLevel = lastLevel.children[0];
                }

                this.defaultExpanded.push(lastLevel.id);
                this.cfbh = lastLevel.id;
                setTimeout(() => {
                  this.$refs.tree.setCurrentKey(this.cfbh);
                }, 200);
                // this.getList();
                this.threeList();
              }
            }
          } else {
            this.$message({
              type: "error",
              message: res.msg,
            });
          }
          this.loading = false;
        })
        .catch((error) => {
          this.loading = false;
          console.log(error);
        });
    },
    //点击左侧树节点
    handleNodeClick(data, node) {
      console.log(node, "'''");

      if (node.childNodes.length === 0) {
        this.cfbh = data.id;
        console.log(this.cfbh, ";;;");
        //this.getList();
        this.threeList();
      }
    },

    //三维图
    threeList() {
      let cfbh = this.cfbh;
      api.threeData(cfbh).then((res) => {
        if (res.code == 200) {
          console.log(res, "三维。。。");
          localStorage.LKData = JSON.stringify(res.data);
          this.verticalMaxHeigth = res.data.verticalMaxHeigth;
          this.verticalMinHeigth = res.data.verticalMinHeigth;
        }
      });
    },
  },

  mounted() {
    this.getLeftTree();
    this.cfbh = this.$route.query.houseId;
    console.log(this.cfbh, "ppppp");
    // localStorage.LKData = JSON.stringify(this.threeData);
    // 		console.log(JSON.parse(localStorage.LKData));
    //  document.getElementById("threeIFrame").src="static/index.html";
  },
};
</script>
<style lang="scss" scoped>
/* .main .el-table td.el-table__cell, .el-table th.el-table__cell.is-leaf {
  border-bottom: none ;
} */
.main {
  height: 100%;
  display: flex;

  .left {
    height: 100%;
  }
  .right {
    margin-left: 20px;
    width: calc(100% - 280px);
    .nav {
      padding: 10px 0 10px 10px;
      color: #fff;

      font-size: 14px;

      background: #004a93;
    }
    .right_main {
      height: 100%;
      box-sizing: border-box;
      .right_table {
        height: calc(100% - 80px);
        position: relative;
      }
    }
  }
}
::v-deep.el-table::before {
  height: 0px;
}
</style>

